<!-- 头部导航 -->
<header class="bg-white sticky top-0 z-[100] transition-all duration-300">
    <div class="max-w-screen-xl mx-auto px-4">
        <!-- 主导航 -->
        <div class="flex justify-between items-center h-16 border-b border-gray-100">
            <!-- Left: Logo and Main Menu -->
            <div class="flex items-center">
                <a href="/" class="text-2xl font-bold text-blue-600 mr-8">商城LOGO</a>
                <nav class="hidden lg:flex space-x-8">
                    <a href="/" class="text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors">首页</a>
                    <a href="/products" class="text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors">所有商品</a>
                    <a href="/blog" class="text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors">博客</a>
                </nav>
            </div>

            <!-- Right: Icons -->
            <div class="flex items-center space-x-6">
                <button class="text-gray-500 hover:text-blue-600 transition-colors lg:hidden" id="search-toggle">
                    <i class="fas fa-search fa-lg"></i>
                </button>
                <button class="text-gray-500 hover:text-blue-600 transition-colors">
                    <i class="fas fa-user fa-lg"></i>
                </button>
                <button class="relative text-gray-500 hover:text-blue-600 transition-colors">
                    <i class="fas fa-heart fa-lg"></i>
                    <span class="absolute -top-1.5 -right-1.5 bg-red-500 text-white text-[10px] font-bold rounded-full h-4 w-4 flex items-center justify-center">0</span>
                </button>
                <button class="relative text-gray-500 hover:text-blue-600 transition-colors">
                    <i class="fas fa-shopping-bag fa-lg"></i>
                    <span class="absolute -top-1.5 -right-1.5 bg-red-500 text-white text-[10px] font-bold rounded-full h-4 w-4 flex items-center justify-center">0</span>
                </button>
                <button class="lg:hidden text-gray-500 hover:text-blue-600 transition-colors">
                    <i class="fas fa-bars fa-lg"></i>
                </button>
            </div>
        </div>

        <!-- 搜索栏 - 默认隐藏，滚动时显示 -->
        <div class="hidden h-0 opacity-0 transition-all duration-300 border-b border-gray-100" id="search-bar">
            <div class="py-3">
                <div class="relative max-w-2xl mx-auto">
                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                        <i class="fas fa-search text-gray-400"></i>
                    </div>
                    <input type="text" 
                           placeholder="搜索商品..." 
                           class="w-full pl-11 pr-32 py-2.5 text-sm bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all"
                    >
                    <div class="absolute inset-y-0 right-0 flex items-center">
                        <span class="mr-3 h-5 w-[1px] bg-gray-200"></span>
                        <button class="mr-2 px-4 h-8 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all">
                            搜索
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 购物车侧边栏 -->
<div id="cartSidebar" class="fixed top-0 right-0 w-96 h-full bg-white shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-[110]">
    <div class="flex flex-col h-full">
        <!-- 头部 -->
        <div class="flex items-center justify-between p-4 border-b">
            <h2 class="text-lg font-semibold">购物车</h2>
            <button onclick="toggleCart()" class="p-2 hover:bg-gray-100 rounded-full transition-colors">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- 查看更多提示 - 顶部 -->
        <div class="text-center py-2 bg-gray-50 text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors">
            <a href="/cart" class="block">
                查看完整购物车 <i class="fas fa-chevron-up ml-1"></i>
            </a>
        </div>

        <!-- 购物车列表 -->
        <div class="flex-1 overflow-y-auto" id="cartItemsList">
            <!-- 购物车项目将通过 JavaScript 动态插入 -->
        </div>

        <!-- 查看更多提示 - 底部 -->
        <div class="text-center py-2 bg-gray-50 text-sm text-gray-500 cursor-pointer hover:bg-gray-100 transition-colors border-t">
            <a href="/cart" class="block">
                查看更多商品 <i class="fas fa-chevron-down ml-1"></i>
            </a>
        </div>

        <!-- 底部结算区 -->
        <div class="border-t p-4 bg-white">
            <div class="flex justify-between items-center mb-4">
                <span class="text-gray-600">商品种类:</span>
                <span class="text-lg font-semibold" id="cartTypeCount">0</span>
            </div>
            <a href="/cart" class="block w-full py-3 px-4 bg-blue-600 text-white text-center rounded-lg hover:bg-blue-700 transition-colors font-medium">
                去购物车结算
            </a>
        </div>
    </div>
</div>

<!-- 遮罩层 -->
<div id="cartOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-[105] hidden" onclick="toggleCart()"></div>

<style>
/* 添加阴影效果 */
header.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 优化搜索框动画 */
#search-bar.active {
    transform: translateY(0);
    opacity: 1;
}

/* 优化图标动画 */
.fa-lg {
    font-size: 1.15em;
}

/* 优化按钮悬停效果 */
button:hover i {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

/* 购物车项目样式 */
.cart-item {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 自定义滚动条 */
#cartItemsList::-webkit-scrollbar {
    width: 4px;
}

#cartItemsList::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#cartItemsList::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 2px;
}

#cartItemsList::-webkit-scrollbar-thumb:hover {
    background: #666;
}
</style>

<script>
let lastScrollTop = 0;
const header = document.querySelector('header');
const searchBar = document.getElementById('search-bar');
const searchToggle = document.getElementById('search-toggle');

// 监听滚动事件
window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    // 向下滚动超过100px时显示搜索框
    if (scrollTop > 100) {
        searchBar.classList.remove('hidden', 'h-0', 'opacity-0');
        searchBar.classList.add('h-auto', 'opacity-100');
        header.classList.add('scrolled');
    } else {
        searchBar.classList.add('hidden', 'h-0', 'opacity-0');
        searchBar.classList.remove('h-auto', 'opacity-100');
        header.classList.remove('scrolled');
    }
    
    lastScrollTop = scrollTop;
});

// 移动端搜索按钮点击事件
searchToggle.addEventListener('click', () => {
    searchBar.classList.toggle('hidden');
    searchBar.classList.toggle('h-0');
    searchBar.classList.toggle('opacity-0');
    searchBar.classList.toggle('h-auto');
    searchBar.classList.toggle('opacity-100');
});

// 购物车开关函数
function toggleCart() {
    const sidebar = document.getElementById('cartSidebar');
    const overlay = document.getElementById('cartOverlay');
    
    if (sidebar.classList.contains('translate-x-full')) {
        sidebar.classList.remove('translate-x-full');
        overlay.classList.remove('hidden');
        updateCartDisplay();
    } else {
        sidebar.classList.add('translate-x-full');
        overlay.classList.add('hidden');
    }
}

// 更新购物车显示
function updateCartDisplay() {
    const cartItems = JSON.parse(localStorage.getItem('shopCart') || '[]');
    const cartList = document.getElementById('cartItemsList');
    const cartTypeCount = document.getElementById('cartTypeCount');
    
    // 更新商品种类数量
    cartTypeCount.textContent = cartItems.length;
    
    // 清空当前列表
    cartList.innerHTML = '';
    
    // 只显示最近的5个商品
    const recentItems = cartItems.slice(0, 5);
    
    if (recentItems.length === 0) {
        cartList.innerHTML = `
            <div class="flex flex-col items-center justify-center h-full text-gray-500">
                <i class="fas fa-shopping-cart text-4xl mb-4"></i>
                <p>购物车是空的</p>
            </div>
        `;
        return;
    }
    
    recentItems.forEach(item => {
        const itemElement = document.createElement('div');
        itemElement.className = 'cart-item p-4 border-b hover:bg-gray-50 transition-colors';
        itemElement.innerHTML = `
            <div class="flex items-center">
                <img src="${item.mainPic}" alt="${item.title}" class="w-16 h-16 object-cover rounded-md">
                <div class="ml-4 flex-1">
                    <h3 class="text-sm font-medium text-gray-900 line-clamp-2">${item.title}</h3>
                    <div class="flex items-center justify-between mt-2">
                        <div class="text-sm text-gray-500">
                            数量: ${item.quantity}
                        </div>
                        <div class="text-sm font-medium text-blue-600">
                            ¥${item.price}
                        </div>
                    </div>
                </div>
            </div>
        `;
        cartList.appendChild(itemElement);
    });
}

// 为购物车图标添加点击事件
document.querySelector('.fa-shopping-bag').parentElement.addEventListener('click', toggleCart);

// 监听 localStorage 变化
window.addEventListener('storage', function(e) {
    if (e.key === 'shopCart') {
        updateCartDisplay();
    }
});
</script>